import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, FlatList, TouchableOpacity, Image } from 'react-native';
import { useDispatch } from 'react-redux';
import * as SecureStore from 'expo-secure-store'
import { useRouter } from 'expo-router';
import { clearPayments } from '@/store/paymentSlice'

export default function Rechargehistory() {
    const dispatch = useDispatch();
    const [diamondList, setDiamondList] = useState([]); // 使用 useState 来存储过滤后的钻石数据

    // 获取 Redux 中的所有支付订单数据，并使用 RootState 类型
    useEffect(() => {
        const loadData = async () => {
            try {
                const paymentDataFromStorage = await SecureStore.getItemAsync('paymentData');

                if (paymentDataFromStorage) {
                    const parsedData = JSON.parse(paymentDataFromStorage);
                    // 过滤出钻石类型的支付数据
                    const filteredDiamonds = parsedData.filter((item: any) => item.content === '钻石');

                    setDiamondList(filteredDiamonds); // 将钻石数据保存到 state
                }
            } catch (error) {
                console.error('Error loading payment data:', error);
            }
        };
        loadData();
    }, [dispatch]);
    const router = useRouter();
    return (
        <View style={styles.container}>
            <View style={styles.headerLeft}>
                <TouchableOpacity onPress={() => router.back()}>
                    <Image source={require('../../assets/images/back.png')} style={styles.headerImg} />
                </TouchableOpacity>
                <Text style={styles.title}>充值记录</Text>
                <Text style={styles.title}></Text>
            </View>
            {diamondList.length > 0 ? (
                <View>
                    <FlatList
                        data={diamondList}
                        keyExtractor={(item) => item.id} // 使用订单 ID 作为唯一 key
                        renderItem={({ item }) => (
                            item.content === '钻石' ? (
                                <View style={styles.orderContainer}>
                                    <View style={styles.priceContainer}>
                                        <Text style={styles.orderText}>钻石数量: {item.duration}</Text>
                                        <Image source={require('../../assets/images/diamond.png')} style={styles.diamondImg} />
                                    </View>
                                    <Text style={styles.orderText}>支付金额: ¥{item.price}</Text>
                                    <Text style={styles.orderText}>支付时间: {item.time}</Text>
                                </View>
                            ) : null
                        )}
                    />
                    <Text style={styles.clearData} onPress={() => {
                        dispatch(clearPayments());
                    }}>清除数据</Text>
                </View>

            ) : (
                <Text style={styles.noOrders}>暂无数据</Text>
            )}
        </View>
    );
}

const styles = StyleSheet.create({
    clearData: {
        marginLeft: 250,
        marginTop: 10,
        color: 'red'
    },
    priceContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        marginRight: -40,
    },
    diamondImg: {
        width: 20,
        height: 20,
        marginLeft: 5,
        marginTop: 5,
    },
    headerImg: {
        width: 20,
        height: 20,
    },
    headerLeft: {
        marginTop: 12,
        display: 'flex',
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    container: {
        flex: 1,
        padding: 20,
        backgroundColor: '#fff',
    },
    title: {
        fontSize: 16,
        fontWeight: 'bold',
    },
    orderContainer: {
        marginBottom: 10,
        padding: 15,
        borderWidth: 1,
        borderColor: '#ddd',
        borderRadius: 8,
        backgroundColor: '#f9f9f9',
        marginTop: 20,
    },
    orderText: {
        fontSize: 16,
        marginTop: 5
    },
    noOrders: {
        fontSize: 15,
        color: 'black',
        textAlign: 'center',
        marginTop: 20,
        marginLeft: 10
    },
});
